<template>
	<view>
		<view class="partner-container">
			<view class="info">
				<view class="current-level" v-if="currentLevel.name">当前等级：{{currentLevel.name}}</view>
				<view class="next-level" v-if="levelGap">上一等级需商品消费：{{levelGap}}</view>
				<view class="next-level1" v-if="!isHighestLevel">
					或现金充值{{scalingFactor}}
				</view>
				<view class="level-up" @click="toLevelUp">
					升级
				</view>
				<image src="/static/icons/people_card_icon@2x.png" class="crown"></image>
			</view>

			<view class="gap">
			</view>

			<view class="desc">
				<view class="title">合伙人等级说明</view>
				<view class="content">
					<rich-text :nodes="desc"></rich-text>
				</view>
			</view>
		</view>

		<!-- 选项遮罩 -->
		<view class="mask" v-if="showSelectMask">
			<view class="dialog1">
				<view class="title">
					升级方式
				</view>
				<view class="spxf">
					<image src="/static/icons/spxf.png" mode="" class="pic"></image>商品消费<text class="toBuy"
						@click="selectToBuy">去购买</text>
				</view>
				<view class="xjcz">
					<image src="/static/icons/xjcz.png" mode="" class="pic"></image>现金充值<text class="toRech"
						@click="selectToRech">去充值</text>
				</view>

				<view class="btns" @click="doNotLevelUp">
					暂不升级
				</view>
			</view>
		</view>

		<!-- 充值 遮罩 -->
		<view class="mask" v-if="showMask">
			<view class="dialog">
				<view class="title">
					本次合伙人等级升级充值金额为
				</view>
				<view class="numc">
					<input type="digit" focus class="ipt" @input="getIptValue" placeholder="请输入充值金额" :value="rechargeNum" /> <view class="yuan">元</view>
				</view>

				<view class="btns">
					<view class="cancle" @click="closeMask">
						取消
					</view>
					<view class="pay" @click="toPay">
						确认
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/md5.js';
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				showMask: false, // 显示对话框
				rechargeNum: null, // 充值金额
				orderId: '', // 充值订单号
				orderData: {}, // 预订单参数
				paySign: '', // 签名
				levelList: [], // 等级信息
				currentLevel: {}, // 用户的所在等级
				levelGap: 0, // 升级需要金额
				desc: '',
				showSelectMask: false, // 选择遮罩
				scalingFactor:0, // 换算系数
				isHighestLevel:false
			};
		},
		onLoad() {
			this.getLevelList()
			this.getDesc()
			
		},
		onShow() {
			this.updateUserData()
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			// 获取充值换算系数
			async getScalingFactor(param){
				const {data:res}=await uni.$http.post('/dictionary/getConfig',{
					code:'HYCZXS'
				})
				
				if(res.success==0){
					console.log(res,88)
					this.scalingFactor=param/res.data+'元'
				}
			},
			// 获取合伙人等级说明
			async getDesc() {
				const {
					data: res
				} = await uni.$http.post('/dictionary/getConfig', {
					code: 'HHR_SM'
				})
				this.desc = res.data
			},
			// 更新用户信息
			async updateUserData() {
				const {
					data: res
				} = await uni.$http.post('/user/getUserData', {
					openid: uni.getStorageSync('openId'),
					phone: uni.getStorageSync('phone'),
					nickname: this.userInfo.nickname,
					headImg: this.userInfo.headImg
				})
				this.updateUserInfo(res.data)
			},
			// 获取所有等级信息
			async getLevelList() {
				const {
					data: res
				} = await uni.$http.post('/level/list')
				console.log(res.data)
				this.levelList = res.data.reverse()
				let i = this.levelList.findIndex(item => {
					return item.integral > this.userInfo.totalConsume
				})
				console.log(i, this.levelList[i - 1])
				// 当前等级
				if (i > -1) {
					this.currentLevel = this.levelList[i - 1]
					// 下一等级的金额减当前的经验
					this.levelGap = Math.ceil(this.levelList[i].integral - this.userInfo.totalConsume) + '元'
					
					// 获取换算系数
					this.getScalingFactor(Math.ceil(this.levelList[i].integral - this.userInfo.totalConsume))

				} else {
					// 最高等级
					this.currentLevel = this.levelList[this.levelList.length - 1]
					this.levelGap = '您已是最高等级'
					this.isHighestLevel=true
				}

			},
			// 选择不升级
			doNotLevelUp() {
				this.showSelectMask = false
			},
			// 选择去购买
			selectToBuy() {
				uni.switchTab({
					url: '/pages/cate/cate'
				})
			},
			// 选择去充值
			selectToRech() {
				// 已是最高等级
				if (this.levelGap === '您已是最高等级') {
					uni.$showMsg('您已经是最高等级!')
				} else {
					// 还可以升级，显示充值的遮罩
					this.showMask = true
					this.showSelectMask = false
				}
			},
			// 升级合伙人等级
			toLevelUp() {
				this.showSelectMask = true

			},
			// 取消充值提现
			closeMask() {
				this.showMask = false
				this.rechargeNum = null
			},
			// 获取充值金额
			getIptValue(e) {
				let value = e.detail.value.replace(/[^\d]/g, '')
				// 事件触发以后，清除上一次的定时器
				clearTimeout(this.timerId)
				// 重新启动一个定时器获取用户输入的最后一个关键字
				this.timerId = setTimeout(() => {
					this.rechargeNum = value.trim()
					this.getCashNum = value.trim()
					// console.log(+e.detail.value)
				}, 500)
			},
			// 生成预订单
			async creatOrder(id) {
				// 生成预订单
				const {
					data: res
				} = await uni.$http.post('/payApi/appwxorderadd', {
					openId: uni.getStorageSync('openId'),
					orderId: id,
					userId: this.userInfo._id
				})
				this.orderData = res.data.param

				// 二次签名
				this.paySign = md5.hexMD5('appId=' + res.data.param.appid + '&nonceStr=' + res.data.param.noncestr +
					'&package=' + 'prepay_id=' + res.data.param.prepayid + '&signType=MD5&timeStamp=' + res.data
					.param.timestamp + '&key=' + res.data.key).toUpperCase();

				// 调用微信支付接口
				var that = this
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: this.orderData.timestamp + '',
					nonceStr: this.orderData.noncestr,
					package: 'prepay_id=' + this.orderData.prepayid,
					signType: 'MD5',
					paySign: this.paySign,
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						that.updateUserData()

						// 充值成功后，重新获取用户信息：还有等级信息
						that.getLevelList()

					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
					}
				});
			},
			// 确认充值支付
			async toPay() {
				// 调支付接口：支付后关闭弹窗
				if (this.rechargeNum > 0) {
					const {
						data: res
					} = await uni.$http.post('/user/rechargeLevel', {
						userId: JSON.parse(uni.getStorageSync('userinfo'))._id,
						amount: this.rechargeNum
					})
					console.log(res)
					this.orderId = res.data

					// 调用生成预订单接口
					this.creatOrder(res.data)

					// 充值成功后，关闭遮罩
					// if(){
					this.showCashMask = false
					this.showMask = false
					this.getCashNum = null
					this.rechargeNum = null
					// }
				}
			},

		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
	}
</script>

<style lang="scss">
	.partner-container {
		height: 150rpx;
		border-radius: 0 0 100rpx 100rpx;
		background-color: #4b4a49;
		position: relative;

		.info {
			width: 702rpx;
			height: 334rpx;
			background: linear-gradient(-57deg, #EFD7B3, #DCB17E);
			border-radius: 20rpx;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			// display: flex;
			// justify-content: space-between;
			// align-items: center;
			margin-top: 45rpx;
			padding: 45rpx 25rpx;
			box-sizing: border-box;
			box-shadow: 0px 10px 20px #e5c498;
			;

			.current-level {
				font-size: 38rpx;
				font-weight: bold;
				color: #7E5621;
				line-height: 31rpx;
			}

			.crown {
				width: 169rpx;
				height: 155rpx;
				opacity: 0.8;
				position: absolute;
				right: 54rpx;
				bottom: 90rpx;
			}

			.next-level {
				font-size: 28rpx;
				font-weight: bold;
				color: #7E5621;
				line-height: 31rpx;
				opacity: 0.7;
				margin-top: 20rpx;
			}.next-level1 {
				font-size: 28rpx;
				font-weight: bold;
				color: #7E5621;
				line-height: 31rpx;
				opacity: 0.7;
				margin-top: 10rpx;
			}

			.level-up {
				width: 150rpx;
				height: 61rpx;
				line-height: 61rpx;
				text-align: center;
				background: linear-gradient(-56deg, #F24545, #D80E0E);
				box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(196, 152, 97, 0.41);
				border-radius: 31rpx;
				margin-top: 70rpx;
				color: #fff;
			}
		}

		.gap {
			width: 749rpx;
			height: 12rpx;
			background: #F7F7F7;
			position: absolute;
			margin-top: 500rpx;
		}

		.desc {
			position: absolute;
			margin-top: 520rpx;
			padding: 0 25rpx;
			box-sizing: border-box;
			text-align: left;
			width: 100%;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				color: #E3A55A;
				height: 100rpx;
				line-height: 100rpx;
			}

			.content {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
		}
	}


	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .6);


		.dialog {
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);
			width: 620rpx;
			height: 390rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;
			box-sizing: border-box;
			padding: 28rpx;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
				margin-bottom: 100rpx;
			}
			
			.numc{
				display: flex;
				width: 500rpx;
				margin: auto;
				justify-content: space-around;
			}

			.ipt {
				width: 460rpx;
				height: 50rpx;
				border-bottom: 2rpx solid #F2F2F2;
				// margin: auto;
			}

			.btns {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;

				.cancle,
				.pay {
					width: 227rpx;
					height: 93rpx;
					border-radius: 8px;
					line-height: 93rpx;
					text-align: center;
				}

				.cancle {
					background: #EAEAEA;
					color: #999999;
				}

				.pay {
					background: linear-gradient(-42deg, #DA441B, #F56942);
					color: #fff;
				}
			}
		}

		.dialog1 {
			position: absolute;
			left: 50%;
			top: 40%;
			transform: translate(-50%, -50%);
			width: 620rpx;
			height: 520rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			text-align: center;

			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #222222;
				margin-bottom: 70rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 30rpx;
			}

			.spxf,
			.xjcz {
				display: flex;
				height: 87rpx;
				line-height: 87rpx;
				box-sizing: border-box;
				padding: 0 28rpx;
				margin-bottom: 35rpx;
				align-items: center;
				position: relative;

				.pic {
					width: 87rpx;
					height: 87rpx;
					vertical-align: middle;
					margin-right: 20rpx;
				}

				.toBuy,
				.toRech {
					position: absolute;
					right: 25rpx;
					width: 118rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(-42deg, #DA441B, #F56942);
					border-radius: 24rpx;
				}
			}

			.btns {
				height: 88rpx;
				line-height: 88rpx;
				border-top: 1rpx solid #f4f4f4;
				color: #999;

			}
		}
	}
</style>
